<template>
	<view>
		<view class="UCenter-bg" catchtap='toMy_detail'>
		    <image class="user-icon" :src="user_data.icon"></image>

		    <view class="user-info">
		      <text class="username">{{user_data.user_name}}</text>
			  <view :class="user_data.sex=='女'?'female':'male'">
			  	
			  </view>
		    </view>
			<view class="btns-top">
				<text>{{characters_text}}</text>
				
			</view>
			<button type="default" class="btn-chat" @tap="toChat(user_data._id)">聊天</button>
		    <!-- <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image> -->
		  </view>
		<!-- 用户信息end -->
		
		  <view class="padding flex text-center text-grey bg-white shadow-warp">
		
		    <view class="flex flex-sub flex-direction solid-right">
		      <view class="text-xxl text-blue">{{focus_count}}</view>
		      <view class="margin-top-sm">
		        <text class="cuIcon-favorfill"></text>关注数</view>
		    </view>
		    <view class="flex flex-sub flex-direction">
		      <view class="text-xxl text-green">{{is_focus_count}}</view>
		      <view class="margin-top-sm">
		        <text class="cuIcon-fork"></text>粉丝数</view>
		    </view>
		    
		  </view>
		
		
		<!-- 设置详细 -->
		 <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">

		    <view class="cu-item arrow">
		      <view class="content" @tap="toIssuePage">
		        <text class="cuIcon-titles text-green"></text>
		        <text class="text-grey">Ta的星球</text>
		          <!-- <text class='num'>19</text> -->
		      </view>

		    </view>
		
		    <view class="cu-item arrow">
		      <view class="content">
		         <text class="cuIcon-moneybagfill text-red"></text>
		        <text class="text-grey" @tap="toSales">Ta的商品</text>
		            <!-- <text class='num'>99</text> -->
		      </view>
		    </view>
<!-- 		    <view class="cu-item arrow">
		      <view class="content">
		        <text class="cuIcon-formfill text-green"></text> 
		        <text class="text-grey" @tap="toBuy">Ta的订单</text>
		        
		      </view>
		    </view> -->
			
		    <view class="cu-item arrow" v-if="!focused">
		      <view class="content" @tap="focusTa">
				<text class="cuIcon-evaluate_fill text-orange"></text>
		        <text class="text-grey">关注Ta</text>
		          <!-- <text class='num'>19</text> -->
		      </view>
		    </view>		
		    <view class="cu-item arrow"  v-if="focused">
		      <view class="content" @tap="cancelFocus">
				<text class="cuIcon-creativefill text-orange"></text>
		        <text class="text-grey">取消关注</text>
		          <!-- <text class='num'>19</text> -->
		      </view>
		    </view>		
		  </view>


		<!-- 设置详细end -->

	</view>
</template>

<script>
	import store from '../../globalStore/store.json'
	import data from '../../datas/data.json'
	export default {
		data() {
			return {
				user_data:'',
				characters_text:"",
				focused:true,
				focus_count:0,
				is_focus_count:0,
			}
		},
		onLoad(options) {
			let user_id=options.user_id;
			let my_user_id=store.user.user_id;
			let my_focused=store.user.focused_users;
			var that=this;
			uniCloud.callFunction({
				name:"getUserdetail",
				data:{"user_id":user_id},
				success(res){
					that.user_data=res.result.msg;
					let characters=that.user_data.characters;
					that.focus_count=that.user_data.focused_users.length;
					that.is_focus_count=that.user_data.is_focused_users.length;
					if(characters.length!=0){
						that.characters_text=characters.slice(0,2)+"...";
					}
					if(my_focused.indexOf(that.user_data._id)==-1){
						that.focused=false;
					}
				}
			})
			// let users=data.users;
			// for(let i=0; i<users.length; i++){
			// 	if(users[i].user_id==user_id){
			// 		this.user_data=users[i];
			// 		break;
			// 	}
			// }
			
		},
		onShow() {

			uni.setNavigationBarTitle({
				title:this.user_data.user_name
			})
			
		},
		methods: {
			toChat(id){
				//store.chat_datas.current_frend_icon=this.user_data.icon;
				uni.navigateTo({
					url:"../msg/msg_chat/msg_chat?friend_id="+id+"&friend_name="+this.user_data.user_name+"&icon="+this.user_data.icon
				})
			},
			  toSales(){
				  
				uni.navigateTo({
					url:"/pages/my/my_sale/my_sale?user_id="+this.user_data._id
				})  
			  },
			 //  toBuy(){
				// uni.navigateTo({
				// 	url:"/pages/my/my_buy/my_buy?user_id="+this.user_data._id
				// }) 				  
			 //  },
			  // 我的发布跳转
			  toIssuePage:function(){
				  uni.navigateTo({
				  	url:"/pages/my/my_issue/my_issue?user_id="+this.user_data._id
				  })
			  },
			toFocus:function(){
				uni.navigateTo({
					url:'my-focus-users/my-focus-users?user_id='+this.user_data._id
				})
			},
			toFans:function(){
				uni.navigateTo({
					url:"./focused-me-users/focused-me-users?user_id="+this.user_data._id
				})				
			},
			focusTa(){
				let my_user_id=store.user.user_id;
				let friend_id=this.user_data._id;
				this.is_focus_count++;
				this.focused=true;
				uniCloud.callFunction({
					name:"focous",
					data:{
						"user_id":my_user_id,
						"friend_id":friend_id
					},
					success(res) {
						store.user.focused_users.push(friend_id);
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			cancelFocus(){
				let my_user_id=store.user.user_id;
				let friend_id=this.user_data._id;
				this.is_focus_count--;
				this.focused=false;
				uniCloud.callFunction({
					name:"cnacelFocus",
					data:{
						"user_id":my_user_id,
						"friend_id":friend_id
					},
					success(res) {
						 let index = store.user.focused_users.indexOf(friend_id);
						 store.user.focused_users.splice(index,1);
					},
					fail(err) {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style scoped>

/* pages/my/my.wxss */
/* 用户信息 */
    .username{
		font-size: 19px;
		font-weight: bolder;
	}

	.UCenter-bg {
	/*  background-image: url(https://image.weilanwl.com/color2.0/index.jpg); */
		background: #1CBBB4;
	  background-size: cover;
	  height: 450rpx;
	  display: flex;
	  justify-content: center;
	  padding-top: 40rpx;
	  overflow: hidden;
	  position: relative;
	  flex-direction: column;
	  align-items: center;
	  color: #fff;
	  font-weight: 300;
	  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
	  opacity: 0.8;
	}

	.UCenter-bg image {
	  width: 200rpx;
	  height: 200rpx;
	}

	.UCenter-bg .gif-wave{
	  position: absolute;
	  width: 100%;
	  bottom: 0;
	  left: 0;
	  z-index: 99;
	  mix-blend-mode: screen;  
	  height: 100rpx;   
	}

	map,.mapBox{
	  left: 0;
	  z-index: 99;
	  mix-blend-mode: screen;  
	  height: 100rpx;   
	}

	map,.mapBox{
	  width: 750rpx;
	  height: 300rpx;
	}
	.text-xl image{
	  height: 100rpx;
	  width: 100rpx;
	}
	.user-icon{
		width: 100px !important;
		height: 170px !important;
		border-radius: 50% 50%;
	}
	

	.num{
	  direction: rtl;
	  margin-left: 58%;
	  font-size: 25rpx;
	}
	.btns-top{
		width: 100%;
		display: flex;
		margin-top: 5%;
		margin-left:82%;
	}
	.btns-top view{
		margin-left: 2%;
		margin-top: 5%;
		width:50%;
	}
	.btns-top view text{
		color:#000000;
	}

	.add-character{
		display: block;
		width: 20%;
		margin-top: 5%;
		font-size: 8px;
	}
	.login-out{
		margin-top: 25%;

		width: 50%;
		color: white;
		background:#0081FF;
	},
	.characters-box{
		background: white;

	}
	.characters{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.character-title{
		width: 100%;
	}
	.character-labels{
		width: 100%;
		display: flex;
		flex-wrap:wrap;
	}
	.character-labels .character{
		width: 45%;
		height: 50px;
		font-size: 18px;
		margin-top: 4%;
	}
	.selected-character{
		width: 45%;
		height: 50px;
		font-size: 18px;
		margin-top: 4%;	
		background: #1CBBB4;
		color: white;
	}
	.finish-select{
		width: 100%;
		margin-top: 50%;
	}
	.finish-select button{
		width: 60%;
	}
	.btn-chat{
		width: 20%;
		height: 50px;
		margin-top: 2%;
		margin-bottom: 3%;
		background: #007AFF;
		color: white;
		font-size: 12px;
	}
	.user-info{
		display: flex;
	}
</style>
